import React, { Component } from 'react';
import './SingerBottom.css'

class SingerBottom extends Component {
  constructor(props) {
    super(props)
    console.log(props);
    this.state = {
      id: props.sing,
      hotSongs: [],
    }
  }

  componentDidMount() {
    this.$axios({
      url: 'artists',
      params: {
        id: this.state.id
      }
    }).then(data => {
      console.log(data);
      console.log(data.hotSongs);

      this.setState(state => {
        return {
          hotSongs: data.hotSongs
        }
      })
    })
  }

  render() {
    return (
      <div>
        <div className="Collection">
          <i>+</i>
          <span>收藏</span>
        </div>

        <div className="play">播放全部(共{this.state.hotSongs ? this.state.hotSongs.length : ''}首)</div>

        <ul className="plat_ul">

          {
            this.state.hotSongs ? (this.state.hotSongs.map((v, i) => {
              return (
                <li key={i} className="play_li">
                  <span className="play_span1">{i+1}</span>
                  <span className="play_span2">
                    <p>{v.name}</p>
                    <p>{v.ar[0].name}-{v.al.name}</p>
                  </span>
                </li>
              )
            })) :null
          }

        </ul>
      </div>
    );
  }
}

export default SingerBottom;